<template>
  <div class="bus-apply page">
    <div class="form">
      <text-input @click.native="showTitle" :disable="true" desc="" :value="apply.title"   label="费用名称"></text-input>
      <text-input class="plane" desc="交通费用" v-if="apply.title=='差旅费用'" v-model="apply.carMoney"   label="交通费用"></text-input>
      <text-input class="plane" desc="住宿费用" v-if="apply.title=='差旅费用'" v-model="apply.houseMoney"   label="住宿费用"></text-input>
<!--      <text-input class="plane" desc="其他费用" v-if="apply.title=='差旅费用'" v-model="apply.otherMoney"   label="其他费用"></text-input>-->
      <text-input class="plane"  desc="补贴费用" v-if="apply.title=='差旅费用'" v-model="apply.moreMoney"   label="补贴费用"></text-input>
      <text-input class="plane" desc="费用合计" v-if="apply.title!='差旅费用'||apply.amount" v-model="apply.amount"   label="费用合计"></text-input>
      <text-input class="plane" @click.native="showPayWay" :disable="true" desc="" :value="apply.payWay"   label="支付方式"></text-input>
      <text-input class="plane" @click.native="showUnit" :disable="true" desc="" v-model="apply.unit"   label="使用单位"></text-input>
<!--      <text-input class="plane" @click.native="showPayTime" :disable="true" desc="" :value="dateTxt"   label="支付时间"></text-input>-->
      <text-area class="plane"   v-model="apply.info" icon="iconkaohejilu" title="申请理由"></text-area>
      <image-upload :max="6"  v-model="apply.img" class="plane image-upload" title="相关照片(请按凭证编号依次上传)" icon="iconhuodong1"></image-upload>
<!--      <text-area @click="showCard" btnText="选择卡号" class="plane"  v-model="apply.bankInfo" icon="iconkaohejilu" title="卡号信息"></text-area>-->
      <text-area @click="showCard" v-if="!apply.bankInfo"   v-model="bankInfo" class="plane"  :disable="true" icon="iconkaohejilu" title="卡号信息(可前往个人中心修改)"></text-area>
      <text-area @click="showCard" v-else   v-model="apply.bankInfo" class="plane"  :disable="true" icon="iconkaohejilu" title="卡号信息(可前往个人中心修改)"></text-area>
      <span class="sum">本年度已经申请 {{sumAmount}} 元</span>
      <div @click="confirm" class="btn plane" v-if="canEdit">提交</div>
      <!--      <span class="more" @click="more()">申请记录</span>-->
    </div>
  </div>
</template>

<script>
import textInput from '../../../components/form/text-input'
import textArea from '../../../components/form/text-area'
import imageUpload from '@/components/form/image-upload'
// import labelSwitch from '../../../components/form/label-switch'
import { getCost, applyCost, costSum, getBus } from '../../../api/apply'
import { showCorrect } from '../../../dialog'
import { parseTime } from '@/util/time'
import { mapState } from '_vuex@3.6.2@vuex'
import { findByName } from '@/api/dic_type'

export default {
  components: {
    textArea, textInput, imageUpload
  },
  mounted () {

  },
  computed: {
    ...mapState({
      uid: state => state.user.id
    }),
    canEdit () {
      if (!this.apply.id) {
        return true
      } else { // 拒绝可以重新修改
        if (this.apply.status == 2 && this.apply.userId == this.uid) {
          return true
        }
      }
      return false
    },
    dateTxt () {
      if (this.apply.payTime) {
        return parseTime(this.apply.payTime, '{y}.{m}.{d}')
      } else {
        return ''
      }
    },
    sumAmount () {
      if (this.apply.id) {
        return this.amount
      } else {
        if (this.apply.amount) {
          return this.amount + parseFloat(this.apply.amount)
        } else {
          return this.amount
        }
      }
    }
  },
  created () {
    this.apply.id = this.$route.query.id
    this.busId = this.$route.query.busId
    this.apply.busId = this.busId
    this.busMoney = 0
    if (this.busId) {
      this.apply.title = '差旅费用'
      getBus(this.busId).then(res => {
        if (res.extra.costApply) {
          this.apply = res.extra.costApply
          return
        }
        let startDate
        let endDate
        let city = ''
        // const tripWay = ''
        res.data.items.forEach(item => {
          if (!startDate) {
            startDate = item.startDate
          }
          endDate = item.endDate
          city += item.startDate + '到' + item.endDate + '\r\n' + item.startPlace + ' 到 ' + item.endPlace + '\r\n'
          // tripWay += item.tripWay + ' '
        })
        this.busMoney = res.extra.money
        this.apply.info = startDate + ' - ' + endDate + '\r\n' + city + '\r\n'
        // + '方式: ' + tripWay + '\r\n'
        // + '总时间: ' + res.data.hours + '小时' + '\r\n' + '补贴: ' + res.extra.money + '元'
        // this.apply.info = '出差途径: ' + city + '\r\n' + '方式: ' + tripWay + '\r\n'
      })
    }
    if (this.apply.id) {
      getCost(this.apply.id).then(res => {
        this.apply = res.data
      })
    }
    costSum().then(res => {
      this.cardInfos = res.extra.cardInfos.map(card => {
        return { text: card, value: card }
      })
      this.amount = res.extra.amount
      this.bankInfo = res.extra.bankInfo
    })
    findByName('组织架构').then(res => {
      this.units = res.data
    })
  },
  methods: {
    showPayTime () {
      if (!this.dateTimePicker) {
        this.dateTimePicker = this.$createDatePicker({
          title: '支付时间',
          min: new Date(2020, 11, 31, 0, 0, 0),
          max: new Date(2030, 11, 31, 0, 0, 0),
          value: new Date(),
          columnCount: 3,
          onSelect: this.selectPayTime
        })
      }
      this.dateTimePicker.show()
    },
    selectPayTime (date) {
      this.apply.payTime = date
    },
    showUnit () {
      if (!this.unitPicker) {
        this.unitPicker = this.$createPicker({
          title: '选择单位',
          data: [this.units],
          alias: {
            value: 'label',
            text: 'label'
          },
          onSelect: this.selUnit
        })
      }
      this.unitPicker.show()
    },
    showPayWay () {
      const ways = [
        { text: '银行', value: '银行' },
        { text: '现金', value: '现金' }
      ]
      if (!this.payPicker) {
        this.payPicker = this.$createPicker({
          title: '选择名称',
          data: [ways],
          onSelect: this.selWay
        })
      }
      this.payPicker.show()
    },
    selWay (txt) {
      this.apply.payWay = txt.join()
    },
    selUnit (txt) {
      this.apply.unit = txt.join()
    },
    selTitle (text) {
      this.apply.title = text.join()
    },
    showTitle () {
      const titles = [
        { text: '新品费', value: '新品费' },
        { text: '上架费', value: '上架费' },
        { text: '返利', value: '返利' },
        { text: '连锁活动奖励', value: '连锁活动奖励' },
        { text: '借资', value: '借资' },
        { text: '区域活动经费', value: '区域活动经费' },
        { text: '其它费用', value: '其它费用' }
      ]
      if (!this.titlePicker) {
        this.titlePicker = this.$createPicker({
          title: '选择名称',
          data: [titles],
          onSelect: this.selTitle
        })
      }
      this.titlePicker.show()
    },
    showCard () {
      // if (!this.picker) {
      //   this.picker = this.$createPicker({
      //     title: '选择卡号',
      //     data: [this.cardInfos],
      //     onSelect: this.selCard
      //   })
      // }
      // this.picker.show()
    },
    selCard (selectedVal) {
      this.apply.bankInfo = selectedVal.join()
    },
    confirm () {
      this.apply.payTime = parseTime(this.apply.payTime)
      this.apply.bankInfo = this.bankInfo
      // this.apply.amount = parseFloat(this.apply.amount) + parseFloat(this.busMoney)
      // this.apply.moreMoney = this.busMoney
      applyCost(this.apply).then(res => {
        this.apply = res.data
        showCorrect('提交成功,等待审核').then(res => {
          this.$router.push({
            path: '/apply/cost/list',
            query: {
              type: this.apply.type,
              top: 0
            }
          })
        })
      })
    }
  },
  data () {
    return {
      busMoney: 0,
      busId: null,
      units: [],
      amount: null,
      bankInfos: [],
      bankInfo: null,
      apply: {
        houseMoney: null,
        carMoney: null,
        otherMoney: 0,
        moreMoney: null,
        title: null,
        unit: null,
        type: 0,
        payWay: null,
        payTime: null,
        img: null,
        amount: null,
        bankInfo: null,
        info: null,
        busId: null
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.bus-apply
  overflow scroll
  padding-bottom 20px
  .sum
    dpr-font(14Px)
    color red
    margin-left 10px
    margin-top 20px
    display block
  .form
    margin-top 20px
    .plane
      margin-top 15px
    .btn
      margin-top 20px
      height:44px;
      background:rgba(0,156,78,1);
      border-radius:20px;
      dpr-font(14Px)
      color white
      display flex
      align-items center
      justify-content center
  .more
    margin-top 20px
    color gray
    display flex
    align-items center
    justify-content center
    dpr-font(12Px)
</style>
